<template>
	<view class="uni-countdown">
	    <text v-if="tpl.prefix">{{tpl.prefix}}</text>
		<text v-if="time.day" class="time-item">
			<text class="time-value" :style="computeStyle">{{time.day}}</text>
			<text class="time-unit" :style="computeUnitStyle">{{dayUnit}}</text>
		</text>
		<text v-if="time.hour || time.day"  class="time-item">
			<text class="time-value" :style="computeStyle">{{time.hour <10 ? '0': ''}}{{time.hour}}</text>
			<text class="time-unit" :style="computeUnitStyle">{{hourUnit}}</text>
		</text>
		<text v-if="time.minute || time.day || time.hour"  class="time-item">
			<text class="time-value" :style="computeStyle">{{time.minute <10 ? '0': ''}}{{time.minute}}</text>
			<text class="time-unit" :style="computeUnitStyle">{{minuteUnit}}</text>
		</text>
		<text v-if="time.second || time.day || time.hour || time.minute"  class="time-item">
			<text class="time-value" :style="computeStyle">{{time.second <10 ? '0': ''}}{{time.second}}</text>
			<text class="time-unit" :style="computeUnitStyle">{{secondUnit}}</text>
		</text>
		<text v-if="tpl.suffix">{{tpl.suffix}}</text>
	</view>
</template>

<script>
	export default {
		props: {
			
		    deadline:{
		        type:Number
		    },
			remain:{
				type: Number
			},
		    format:{
		        type:String
		    },
			unitSize:{
				type: Number
			},
			unitStyle:{
				type: Object
			},
			valueStyle:{
				type: Object
			},
			showDay:{
				type:Boolean,
				default: false
			},
			dayUnit:{
				type: String,
				default: '天'
			},
			hourUnit:{
				type: String,
				default: '时'
			},
			minuteUnit:{
				type: String,
				default: '分'
			},
			secondUnit:{
				type: String,
				default: '秒'
			}
		},
		data() {
			return {
				countDown: 0
		    };
		},
		computed : {
			
			computeUnitStyle(){
				if(this.unitStyle){
					return this.unitStyle;
				}
				else if(this.unitSize){
					return {
						fontSize: this.unitSize + 'rpx'
					}
				}
				return {};
			},
			computeStyle(){
				if(this.valueStyle){
					return this.valueStyle;
				}
				return {};
			},
			
			/**
			 * 模板文本
			 */
			tpl(){
				if(!this.format){
					return {
						prefix: '',
						suffix: ''
					};
				}
				let arr = this.format.split('{time}');
				if(arr.length == 2){
					return {
						prefix: arr[0],
						suffix: arr[1]
					}; 
				}
				return {
					prefix: this.format,
					suffix: ''
				}; 
			},
			/**
			 * 时间
			 */
		    time () {

				if(this.countDown <= 0){
					return "";
		        }
		        var time = this.countDown;
		        var second = time % 60;
				var data = {};
				data.second = second;
		        time = Math.floor(time / 60)
		        if(time > 0){
		           var minute = time % 60;
		           data.minute = minute;
		           time = Math.floor(time / 60)
		           if(time > 0){
					    if(this.showDay){
							var hour = time % 24;
							data.hour = hour;
							time = Math.floor(time / 24);
							if(time > 0){
								data.day = time;
							}
					    }
						else{
							data.hour = time;
						}
					
		           }
		        }
				return data;
		    }
		},
		mounted() {
			var time = new Date().getTime();
			this.countDown = Math.floor(this.remain);
			
			if(this.countDown == null){
				this.countDown = Math.floor((this.deadline - time)/ 1000);
			}
			if(this.interval){
				clearInterval(this.interval)
			}
			this.interval = setInterval(() => {
				this.countDown --;
				if(this.countDown <=0){
					this.$emit("complete");
					clearInterval(this.interval)
				}
			}, 1000);
		},
		beforeDestroy (){
			
			if(this.interval){
				clearInterval(this.interval)
			}
		}
	}
</script>

<style lang="scss">
	.uni-countdown{
		
		flex:1;
		text-align: center;
	}
	.time-value{
		margin-right: 2rpx;
	}
	.time-item{
		margin: 0 4rpx;
	}
</style>
